import { defineComponent, ref } from "vue"

export default defineComponent({
	name: "ButtonView",
	setup() {
		const bRef = ref(null)
		return () => (
			<div class="button-container">
				<h1 class="row-title">普通展示</h1>
				<div class="row">
					<chen-button type="default">default</chen-button>
					<chen-button type="primary">primary</chen-button>
					<chen-button type="info">info</chen-button>
					<chen-button type="success">success</chen-button>
					<chen-button type="warning">warning</chen-button>
					<chen-button type="danger">danger</chen-button>
				</div>
				<h1 class="row-title">朴素按钮</h1>
				<div class="row">
					<Chen-Button type="default" plain>
						default
					</Chen-Button>
					<Chen-Button type="primary" plain>
						primary
					</Chen-Button>
					<Chen-Button type="info" plain>
						info
					</Chen-Button>
					<Chen-Button type="success" plain>
						success
					</Chen-Button>
					<Chen-Button type="warning" plain>
						warning
					</Chen-Button>
					<Chen-Button type="danger" plain>
						danger
					</Chen-Button>
				</div>
				<h1 class="row-title">圆角按钮</h1>
				<div class="row">
					<Chen-Button type="default" rounded>
						default
					</Chen-Button>
					<Chen-Button type="primary" rounded>
						primary
					</Chen-Button>
					<Chen-Button type="info" rounded>
						info
					</Chen-Button>
					<Chen-Button type="success" plain rounded>
						success
					</Chen-Button>
					<Chen-Button type="warning" plain rounded>
						warning
					</Chen-Button>
					<Chen-Button type="danger" plain rounded>
						danger
					</Chen-Button>
				</div>
				<h1 class="row-title">圆形按钮</h1>
				<div class="row">
					<Chen-Button type="default" circle>
						默
					</Chen-Button>
					<Chen-Button type="primary" circle>
						主
					</Chen-Button>
					<Chen-Button type="info" circle>
						信
					</Chen-Button>
					<Chen-Button type="success" plain circle>
						成
					</Chen-Button>
					<Chen-Button type="warning" plain circle>
						注
					</Chen-Button>
					<Chen-Button type="danger" plain circle>
						危
					</Chen-Button>
				</div>
				<h1 class="row-title">禁用按钮</h1>
				<div class="row">
					<Chen-Button type="default" disabled>
						default
					</Chen-Button>
					<Chen-Button type="primary" disabled>
						primary
					</Chen-Button>
					<Chen-Button type="info" disabled>
						info
					</Chen-Button>
					<Chen-Button type="success" disabled>
						success
					</Chen-Button>
					<Chen-Button type="warning" disabled>
						warning
					</Chen-Button>
					<Chen-Button type="danger" disabled>
						danger
					</Chen-Button>
				</div>
				<h1 class="row-title">加载中按钮</h1>
				<div class="row">
					<Chen-Button type="default" loading>
						default
					</Chen-Button>
					<Chen-Button type="primary" loading>
						primary
					</Chen-Button>
					<Chen-Button type="info" loading>
						info
					</Chen-Button>
					<Chen-Button type="success" loading>
						success
					</Chen-Button>
					<Chen-Button type="warning" loading>
						warning
					</Chen-Button>
					<Chen-Button type="danger" loading>
						danger
					</Chen-Button>
				</div>
				<h1 class="row-title">图形按钮</h1>
				<div class="row">
					<Chen-Button type="default" icon="envelope">
						默认按钮
					</Chen-Button>
					<Chen-Button type="primary" icon="bell">
						主要按钮
					</Chen-Button>
					<Chen-Button type="info" icon="gear">
						信息按钮
					</Chen-Button>
					<Chen-Button type="success" icon="code">
						成功按钮
					</Chen-Button>
					<Chen-Button type="warning" icon="plane">
						警告按钮
					</Chen-Button>
					<Chen-Button type="danger" icon="flask">
						危险按钮
					</Chen-Button>
				</div>
				<h1 class="row-title">不同尺寸按钮</h1>
				<div class="row">
					<Chen-Button type="default" size="small">
						默认按钮
					</Chen-Button>
					<Chen-Button type="primary" icon="gear" size="small">
						主要按钮
					</Chen-Button>
					<Chen-Button type="info" icon="gear" plain>
						信息按钮
					</Chen-Button>
					<Chen-Button type="success" icon="code" plain>
						成功按钮
					</Chen-Button>
					<Chen-Button type="warning" icon="plane" size="large">
						警告按钮
					</Chen-Button>
					<Chen-Button type="danger" icon="flask" size="large">
						危险按钮
					</Chen-Button>
				</div>
				<h1 class="row-title">按钮事件</h1>
				<div class="row">
					<Chen-Button type="primary" icon="gear" onClick={() => alert("点击触发了事件")}>
						点击事件
					</Chen-Button>
				</div>
				<h1 class="row-title">点击获取里面button原生元素ref</h1>
				<div class="row">
					<Chen-Button
						type="primary"
						icon="gear"
						onClick={() => {
							console.log((bRef.value as any).ref)
						}}
						ref={bRef}
					>
						点击事件
					</Chen-Button>
				</div>
			</div>
		)
	},
})
